<template>
    <div>

        <!-- 添加角色按钮 -->
        <el-button @click="addRole()">
            添加角色
        </el-button>

        <!-- 添加角色对话框 -->
        <el-dialog title="添加角色" :visible.sync="dialogFormVisible1">
        <el-form>
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input v-model="addRoleName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="handleAddRoleConfirm()">确 定</el-button>
        </div>
      </el-dialog>
  
      <!-- 表格 -->
      <el-table :data="data" stripe height="713">
        <el-table-column
          v-for="info in rightHeader"
          :key="info.key"
          :property="info.key"
          :label="info.label"
        >
          <template slot-scope="scope">
            <!-- 渲染对应表格里面的内容 -->
            {{ scope.row[scope.column.property] }}
          </template>
        </el-table-column>
  
        <!-- 编辑角色按钮
        <el-table-column label="编辑">
          <template slot-scope="scope">
            <el-button @click="editRole(scope.row, scope.$index)"
              >编辑</el-button
            >
          </template>
        </el-table-column> -->
  
        <!-- 删除角色按钮 -->
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button @click="deleteRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="blockPage">
        <div style="margin-top: 0.2rem; margin-left: 0.2rem">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 7, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals"
          >
          </el-pagination>
        </div>
      </div>
  
      <!-- 编辑角色对话框 -->
      <el-dialog title="编辑角色信息" :visible.sync="dialogFormVisible2">
        <el-select placeholder="角色名" value-key="id" v-model="selectRole" style="width: 400px;">
            <el-option
            v-for="option in roles" :value="option" :key="option.id"             
               :label="option.name"
            >

            </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { eachMapping } from "@jridgewell/trace-mapping";
  import axios from "axios";
  import { TypedChainedSet } from "webpack-chain";
  export default {
    data() {
      return {
        addRoleName:'',
        selectRole:{},
        roles:[],
        roleId:'',
        score: "",
        rightHeader: [
          {
            label: "角色id",
            key: "id",
          },
          {
            label: "角色名称",
            key: "name",
          }
        ],
        data: [],
        pagesize: 10,
        currentPage: 1,
        totals: 10,
        edit: {
          id: "",
          airCondType: "",
          airCondCode: "",
          speculateReason: "",
          repairReco: "",
        },
        dialogFormVisible: false,
        dialogVisible1: false,
        roleIndex: "",
        formLabelWidth: "120px",
        dialogFormVisible1:false,
  
        userId:'',
        pickerOptions: {
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        appointTime: "",
        value2: "",
        value3: "",
        dialogVisible: false,
        dialogFormVisible2:false,
        token:JSON.parse(localStorage.getItem("user")).token
      };
    },
  
    // 每次刷新页面就加载分页数据
    mounted: function () {
    //   this.onLoad(1, 5);
      this.onLoadRole();
    },
  
  
    methods: {
  
      // 每页数据条数改变时的事件
      handleSizeChange(val) {
        this.pagesize = val;
        console.log(`每页 ${val} 条`);
        this.onLoad(this.currentPage, val);
      },
  
      // 页号改变时的事件
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log("this.currentPage=" + this.currentPage);
        console.log("this.pagesize=" + this.pagesize);
        this.onLoad(this.currentPage, this.pagesize);
      },

      //加载角色下拉列表
      onLoadRole(){
        axios({
          method: "get",
          url: "http://localhost:9090/role/roleList",
          headers:{
            token:this.token
          }
        })
          .then((res) => {
            console.log("查询roleList成功，roles:", res.data);
            this.data = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
  
      // 加载分页数据
      onLoad(current, size) {
        axios({
          method: "post",
          url: "http://localhost:9090/user/pageUser",
          data: {
            current: current,
            size: size,
          },
          headers:{
            token:this.token
          }
        })
          .then((res) => {
            console.log("分页查询user成功，data:", res.data.data);
            this.data = res.data.data.records;
            this.totals = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
            console.log("addPart");
          });
      },
  
  
      // 编辑订单
      editOrder(order, index) {
        this.dialogFormVisible = true;
        this.index = index;
      },
  
  
      // 删除订单
      deleteOrder(item) {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            axios({
              method: "post",
              url: "http://localhost:9090/order/delete",
              data: {
                id: item.id,
              },
            })
              .then((res) => {
                console.log("删除成功");
                this.data.forEach((order, index, arr) => {
                  if (order.id == item.id) {
                    arr.splice(index, 1);
                  }
                });
              })
              .catch((err) => {
                console.log("失败---" + err);
              });
  
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
  
      // 点击预约按钮的事件
      startAppoint(item, index) {
        this.dialogVisible = true;
        this.index = index;
        console.log(index);
      },
  
      //确认预约对话框的事件
      submitAppoint() {
        console.log("appointTime:", this.appointTime);
        axios({
          method: "post",
          url: "http://localhost:9090/order/appoint",
          data: {
            id: this.data[this.index].id,
            appointTime: this.appointTime,
          },
        })
          .then((res) => {
            this.$message({
              message: "订单已成功预约",
              type: "success",
            });
            console.log("订单已成功预约");
            this.data[this.index].appointTime = this.appointTime;
            this.data[this.index].status = "待领取";
          })
          .catch((err) => {
            this.$message.error("预约失败");
            console.log("失败---" + err);
          });
        this.dialogVisible = false;
      },
  
      // 点击评分按钮的事件
      startScore(item, index) {
        if (this.data[index].status !== "已完成") {
          this.$message("订单当前状态不能评分");
          return;
        }
        this.dialogVisible1 = true;
        this.index = index;
        console.log(index);
      },
  
      // 评分对话框确认的事件
      submitScore() {
        axios({
          method: "post",
          url: "http://localhost:9090/order/score",
          data: {
            id: this.data[this.index].id,
            score: this.score,
          },
        })
          .then((res) => {
            console.log("订单已成功评分");
            this.$message({
              message: "订单已成功评分",
              type: "success",
            });
            this.data[this.index].score = this.score;
            this.data[this.index].status = '已评分';
          })
          .catch((err) => {
            this.$message.error("评分失败");
            console.log("失败---" + err);
          });
        this.dialogVisible1 = false;
      },
  
      // 领取任务
      receive(item, index) {
        axios({
          method: "post",
          url: "http://localhost:9090/order/receive",
          data: {
            id: item.id,
          },
          headers: {
            token: encodeURIComponent(localStorage.getItem("user")),
          },
        })
          .then((res) => {
            console.log("任务已成功领取");
            this.$message({
              message: "任务已成功领取",
              type: "success",
            });
            this.data[index].status = "待领取";
          })
          .catch((err) => {
            this.$message.error("任务领取失败");
            console.log("任务领取失败---" + err);
          });
      },

      //点击编辑角色按钮事件
      editRole(item,index){
        console.log("=============item.id:",item.id)
        console.log("=============index:",index)
        this.dialogFormVisible2=true;
        this.roleIndex=index;
        this.userId=item.id;
      },

      //编辑角色对话框确定事件
      handleConfirm(){
        console.log("=============selectRole.id:",this.selectRole.id)
        console.log("=============userId:",this.userId)
        axios({
          method: "post",
          url: "http://localhost:9090/user/editRole",
          data: {
            roleId: this.selectRole.id,
            userId:this.userId    
          },
          headers: {
            token: this.token,
          },
        })
          .then((res) => {
            console.log("角色已成功编辑");
            this.$message({
              message: "角色已成功编辑",
              type: "success",
            });
            this.data[this.roleIndex].roleName = this.selectRole.name;
            this.dialogFormVisible2=false;
          })
          .catch((err) => {
            this.$message.error("角色编辑失败");
            console.log("角色编辑失败---" + err);
          });
      },

    //   点击添加角色按钮的事件
    addRole(){
        this.dialogFormVisible1=true;
    },

    // 添加角色对话框确定事件
    handleAddRoleConfirm(){
        axios({
          method: "get",
          url: "http://localhost:9090/role/add",
          params: {
            roleName:this.addRoleName
          },
          headers: {
            token: this.token,
          },
        })
          .then((res) => {
            this.dialogFormVisible1=false;
            console.log("角色已成功添加");
            this.$message({
              message: "角色已成功添加",
              type: "success",
            });
          })
          .catch((err) => {
            this.dialogFormVisible1=false;
            this.$message.error("角色添加失败");
            console.log("角色添加失败---" + err);
          });
    },

    deleteRole(role){
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "get",
            url: "http://localhost:9090/role/delete",
            params: {
              id: role.id,
            },
          })
            .then((res) => {
              console.log("删除成功");
              this.data.forEach((item, index, arr) => {
                if (item.id == role.id) {
                  arr.splice(index, 1);
                }
              });
            })
            .catch((err) => {
              console.log("删除失败---" + err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
    },
  };
  </script>
  